<template>
  <header>
    <van-search
      v-model="value"
      shape="round"
      background="#09BB07"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      @clear="init()"
    />
  </header>
  <main class="manual_main">
    <section class="manual_main_item" v-for="item in manualList" :key="item?.id">
      <Card >
        <section class="manual_main_item_content" @click="handleLookDetail(item)" :style="{ backgroundImage: `url(/api${item?.cover})` }">
          <span class="manual_main_item_content_title">{{ item?.title }}</span>
          <span style="align-self: flex-end;"><van-icon name="records-o" />植物手册</span>
        </section>
      </Card>
    </section>
  </main>
  <van-empty description="暂无数据"  v-if="!manualList.length"/>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import Card from '@/components/Card/index.vue'
import { getManualList } from '@/apis/manual'


const router = useRouter();
const value = ref('')

const manualList = ref([])

const onSearch = async (value) => {
  try {
    const { data = {} } = await getManualList({
      pageNum: 1,
      pageSize: 9999,
      title: value,
    });
    manualList.value = data?.list;
  } catch (error) {
    console.log(error, 'search-error');

  }
}

const onCancel = () => {
  value.value = '';
  init();
}


const handleLookDetail = (item) => {
  router.push(`/manual/detail/${item?.id}`)
}
const init = async () => {
  try {
    const { data = {} } = await getManualList({
      pageNum: 1,
      pageSize: 9999,
    })
    manualList.value = data?.list;

  } catch (error) {
    console.log(error, 'init-manual-error')
  }
}
onMounted(() => {
  init()
})
</script>

<style lang="less" scoped>
.manual_main {
  display: flex;
  flex-wrap: wrap;
  &_item {
    width: 48%;
    margin: 1%;
    height: 220px;
    &_content{
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      box-sizing: border-box;
      padding: 8px;
      color: #fff;
      &_title{
        font-size: 14px;
      }
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>
